<template>
  <div ref="dom"></div>
</template>
<script>
import echarts from 'echarts'
import { on, off } from '@/libs/tools'
import config from '@/config'
const { report_color } = config
export default {
  data () {
    return {
      dom: null
    }
  },
  props: {
    value: Object
  },
  methods: {
    resize () {
      this.dom.resize()
    }
  },
  mounted () {
    const option = {
      title: {
        text: this.value.title
      },
      color: report_color,
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: this.value.proname
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: this.value.ctime
        }
      ],
      yAxis: this.value.yAxis ? this.value.yAxis : [
        {
          type: 'value'
        }
      ],
      series: this.value.series
    }

    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.dom)
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
<style>
</style>
